<template>
	<u-navbar :is-back="false" :is-fixed="true" :background="{background:'#ffffff'}" :border-bottom="false">
		<view class="u-flex top-box">
			<view class="u-flex-1">
				<u-search bg-color="#F6F6F6" :show-action="false" placeholder="请输入关键词"  disabled
					@click="searchClick"></u-search>
			</view>
		</view>
	</u-navbar>
	<view class="bgw">
		<view class="u-flex">
			<view class="scroll-left-wrap">
				<scroll-view :scroll-y="true" class='scroll-left'>
					<template v-for="(v,i) in menus" :key="v.sid">
						<view :class="['left-menu',leftMenuCurrent == i ?'active':'']" @click="leftMenuClick(i)">
							<view class="u-rela">
								{{v.name}}
							</view>
						</view>
					</template>
				</scroll-view>
			</view>
			<view class="u-flex-1 scroll-right-wrap">
				<view class="u-flex">
					<view class="sort-item" @click="setSort('')" :class="!sortValue?'active':''">
						默认排序
					</view>
					<view class="sort-item u-flex"
						:class="sortValue == 'price_desc'||sortValue =='price_asc'?'active':''"
						@click="setSort(sortValue == 'price_desc'?'price_asc':'price_desc')">
						<text class="u-p-r-10">价格</text>
						<u-icon name="arrow-downward" size="28" color="#117B12"
							v-if="sortValue == 'price_desc'"></u-icon>
						<u-icon name="arrow-upward" size="28" color="#117B12"
							v-else-if="sortValue == 'price_asc'"></u-icon>
						<u-icon name="arrow-downward" size="28" color="#999999" v-else></u-icon>
					</view>
					<view class="sort-item u-flex" :class="sortValue == 'sale_desc'||sortValue =='sale_asc'?'active':''"
						@click="setSort(sortValue == 'sale_desc'?'sale_asc':'sale_desc')">
						<text class="u-p-r-10">销量</text>
						<u-icon name="arrow-downward" size="28" color="#117B12"
							v-if="sortValue == 'sale_desc'"></u-icon>
						<u-icon name="arrow-upward" size="28" color="#117B12"
							v-else-if="sortValue == 'sale_asc'"></u-icon>
						<u-icon name="arrow-downward" size="28" color="#999999" v-else></u-icon>
					</view>
				</view>
				<scroll-view :scroll-y="true" class='scroll-right' :scroll-into-view="scrollIntoView"
					@scroll="rightScroll" @scrolltolower="rightScroltolower" lower-threshold='30'>
					<view v-for="(item,index) in list" :key="item.sid" class="u-p-l-16 u-p-r-16">
						<item :detail="item"></item>
					</view>
					<u-gap height="20"></u-gap>
					<g-loadmore :status="loadmoreStatus"></g-loadmore>
					<u-gap height="20"></u-gap>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import store from '@/store/index.js'; //需要引入store
	import {
		ref,
		reactive,
		computed,
		onMounted,
		getCurrentInstance,
		nextTick,
		watch,
	} from 'vue'
	const {
		proxy,
	} = getCurrentInstance()
	const {
		baseImgUrl
	} = proxy;
	const {
		nav,
		navLogin
	} = proxy.$util;
	import {
		onReady,
		onLoad,
		onShow,
		onPageScroll,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import mixins from '@/common/js/mixins.js';
	const {
		shareAppMessage
	} = mixins();
	import mixinList from '@/common/js/mixinList.js';
	const {
		ascended,
		sortFieldName,
		total,
		current_page,
		page_size,
		last_page,
		apiPath,
		loading,
		list,
		searchParams,
		getList,
		getNextList,
		loadmoreStatus,
		searchClear,
		searchConfirm
	} = mixinList();
	apiPath.value = 'getProduct'
	searchParams.type = 1
	searchParams.productStatus = 1
	const menus = ref([]);
	const leftMenuCurrent = ref(0);
	searchParams.classificationSid = computed(()=>{
		try{
			return menus.value[leftMenuCurrent.value].sid	
		}catch(err){
			return ''
		}	
	})
	watch(leftMenuCurrent, async (val) => {
		await getList(1)
	})
	
	const scrollIntoView = ref('');
	const query = uni.createSelectorQuery().in(proxy);
	const rightScrollFlag = ref(true);
	const rightPosition = reactive([]);
	const leftMenuClick = (i) => {
		leftMenuCurrent.value = i
	}
	const rightScroltolower = () => {
		if (loading.value) {
			return;
		}
		if (current_page < last_page) {
			getList(current_page.value + 1)
		}		
	}
	const rightScroll = (e) => {

	}
	const searchClick = () => {
		nav('/pages/search/search?type='+searchParams.type)
	}
	
	ascended.value = false;
	sortFieldName.value = 'created'
	const sortValue = ref('')
	const setSort = (v) => {
		sortValue.value = v;
		if(v == 'price_desc'){
			ascended.value = false;
			sortFieldName.value = 'price'
		}
		if(v == 'price_asc'){
			ascended.value = true;
			sortFieldName.value = 'price'
		}
		if(v == 'sale_desc'){
			ascended.value = false;
			sortFieldName.value = 'salesVolume'
		}
		if(v == 'sale_asc'){
			ascended.value = true;
			sortFieldName.value = 'salesVolume'
		}
		getList(1)
	}

	const skeletonLoading = ref(true)
	const skeletonList = ref([1, 2, 3, 4])
	watch(loadmoreStatus, (newV) => {
		if (newV != 'loading') {
			skeletonLoading.value = false;
			skeletonList.value = []
		}
	})
	const getData = async () => {
		await proxy.$u.api.getProductClassification({
			ascended:true,
			current:1,
			size:999
		}).then(res => {
			let {
				data,
				code,
				msg
			} = res;
			if (code == 200) {
				menus.value = data.records;
			} else {
				uni.$u.toast(msg || '错误');
			}
		}).catch(res => {
			
		})
	}
	

	onReady(() => {
		console.log('onReady')
	})
	onLoad(async (d) => {
		console.log('onLoad', d)
		await getData();
		await getList(1);
	})
	onShow(async () => {

	})
	onPageScroll(e => {

	})
</script>

<style lang="scss" scoped>
	.top-box {
		display: flex;
		align-items: center;
		padding: 0 14px;
		width: 100%;
	}

	.scroll-left-wrap {
		width: 180upx;
		min-width: 180upx;
		background: #F9F9F9;

		.scroll-left {
			height: calc(100vh - 44px - 50px); // 非APP平台下生效
		}

	}

	.scroll-right-wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 44px - 50px); // 非APP平台下生效

		.scroll-right {
			flex: 1;
			height: 0
		}

		.sort-item {
			padding: 10upx 16upx;
			margin-right: 50upx;
			color: #999999;

			&.active {
				color: #117B12;
			}
		}
	}

	.left-menu {
		height: 100rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #666666;
		position: relative;

		&.active {
			background-color: #ffffff;
			color: #117B12;
		}

		&.active::after {
			position: absolute;
			content: " ";
			width: 10upx;
			height: 40upx;
			background: #117B12;
			left: 0;
			top: 50%;
			margin-top: -20upx;
		}
	}
</style>